/* eslint-disable */

<template>
  <div class="index-container">
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="24">
        <el-card shadow="never">
          <div slot="header">
            <span>日期选择</span>
          </div>
          <div style="text-align: center">
            <el-date-picker
              v-model="timePicker"
              class="datePicker"
              type="date"
              value-format="yyyy-MM-dd"
              :default-value="new Date().setFullYear(2020)"
              placeholder="起始日期"
              @change="setCookie"
            ></el-date-picker>
          </div>
          <br />
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="24">
        <el-card shadow="never">
          <div slot="header">
            <span>资源/订单有更新</span>
          </div>
          <div style="text-align: center">
            <el-button
              type="primary"
              round
              :disabled="isRescheduling"
              @click="doSchedule"
            >
              重新排程
            </el-button>
          </div>
          <br />
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="24">
        <el-card shadow="never">
          <div slot="header">
            <span>订单按期完成情况概览</span>
          </div>
          <div style="text-align: center">
            <el-progress
              type="circle"
              :percentage="punctualRate"
              :color="punctualColor"
            ></el-progress>
          </div>
          <br />
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
        <el-card shadow="never">
          <div slot="header">
            <span>出货量</span>
          </div>
          <div id="chart" style="height: 120px"></div>
          <div class="bottom">
            <span>日均出货量: {{ averageShipment }}</span>
          </div>
        </el-card>
      </el-col>
      <el-col
        v-for="(item, index) in iconList"
        :key="index"
        :xs="12"
        :sm="6"
        :md="3"
        :lg="3"
        :xl="3"
      >
        <router-link :to="item.link">
          <el-card class="icon-panel" shadow="never">
            <vab-icon
              :style="{ color: item.color }"
              :icon="['fas', item.icon]"
            ></vab-icon>
            <p>{{ item.title }}</p>
          </el-card>
        </router-link>
      </el-col>

      <!--      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">-->
      <!--        <el-card shadow="never">-->
      <!--          <div slot="header">-->
      <!--            <span>授权数</span>-->
      <!--          </div>-->
      <!--          <vab-chart-->
      <!--            :autoresize="true"-->
      <!--            theme="vab-echarts-theme"-->
      <!--            :options="sqs"-->
      <!--          />-->
      <!--          <div class="bottom">-->
      <!--            <span>-->
      <!--              总授权数:-->
      <!--              <vab-count-->
      <!--                :start-val="config2.startVal"-->
      <!--                :end-val="config2.endVal"-->
      <!--                :duration="config2.duration"-->
      <!--                :separator="config2.separator"-->
      <!--                :prefix="config2.prefix"-->
      <!--                :suffix="config2.suffix"-->
      <!--                :decimals="config2.decimals"-->
      <!--              />-->
      <!--            </span>-->
      <!--          </div>-->
      <!--        </el-card>-->
      <!--      </el-col>-->
    </el-row>
  </div>
</template>

<script>
  import * as echarts from 'echarts'
  import { dependencies, devDependencies } from '../../../package.json'
  import { doSchedule } from '../../api/doSchedule'
  import { getPunctualRate } from '../../api/getPunctualRate'
  import { getShipment } from '../../api/getShipment'
  import { getCookie } from '@/utils/cookie'

  export default {
    name: 'Index',
    data() {
      return {
        timer: 0,
        updateTime: process.env.VUE_APP_UPDATE_TIME,
        nodeEnv: process.env.NODE_ENV,
        dependencies: dependencies,
        devDependencies: devDependencies,
        averageShipment: 0,
        isRescheduling: false,
        config1: {
          startVal: 0,
          endVal: this.$baseLodash.random(20000, 60000),
          decimals: 0,
          prefix: '',
          suffix: '',
          separator: ',',
          duration: 8000,
        },
        config2: {
          startVal: 0,
          endVal: this.$baseLodash.random(1000, 20000),
          decimals: 0,
          prefix: '',
          suffix: '',
          separator: ',',
          duration: 8000,
        },
        config3: {
          startVal: 0,
          endVal: this.$baseLodash.random(1000, 20000),
          decimals: 0,
          prefix: '',
          suffix: '',
          separator: ',',
          duration: 8000,
        },

        timePicker: '2020-12-01',
        //出货量
        chl: {
          tooltip: {
            show: true,
            formatter: function (params) {
              return params
            },
          },
          grid: {
            top: '4%',
            left: '2%',
            right: '4%',
            bottom: '0%',
            containLabel: true,
          },
          xAxis: [
            {
              type: 'category',
              boundaryGap: false,
              data: ['a'],
              axisTick: {
                alignWithLabel: true,
              },
            },
          ],
          yAxis: [
            {
              type: 'value',
            },
          ],
          series: [
            {
              name: '访问量',
              type: 'line',
              data: [1],
              smooth: true,
              areaStyle: {},
            },
          ],
        },

        //其他信息
        userAgent: navigator.userAgent,
        //卡片图标
        iconList: [
          {
            icon: 'table',
            title: '订单',
            link: '/order',
            color: '#5cdbd3',
          },
          {
            icon: 'book',
            title: '资源',
            link: '/resource',
            color: '#69c0ff',
          },
          {
            icon: 'balance-scale-left',
            title: '排程',
            link: '/scheduler',
            color: '#ff9c6e',
          },
          {
            icon: 'coffee',
            title: '关于',
            link: '/vab/more',
            color: '#95de64',
          },
          {
            icon: 'laptop-code',
            title: '仓库',
            link: '/index',
            color: '#b37feb',
          },
          {
            icon: 'list',
            title: '菜单',
            link: '/index',
            color: '#ffc069',
          },
          {
            icon: 'link',
            title: '链接',
            link: '/index',
            color: '#ff85c0',
          },
          {
            icon: 'video',
            title: '附录',
            link: '/index',
            color: '#ffd666',
          },
        ],

        curDate: '2020-12-21', // 当前日期
        punctualRate: 0, // 当前按时交货率
        punctualColor: '#000000', // 当前交货率进度条颜色
      }
    },
    watch: {
      timePicker() {
        document.cookie = 'cur_date=' + this.timePicker
      },
    },
    created() {
      this.setCookie()
      // this.getPunctualRate()
      // this.getShipment()
    },
    beforeDestroy() {
      clearInterval(this.timer)
    },
    mounted() {},
    methods: {
      setCookie() {
        let cookieDate = getCookie('cur_date')
        let c_start = document.cookie.indexOf('cur_date')
        //如果没有设置过cookie值，默认timePicker中的值
        if (c_start === -1) {
          let pattern = /(\d{4})-(\d{2})-(\d{2})/
          let formattedDate = this.timePicker.replace(
            pattern,
            '$1/$2/$3 00:00:00'
          )
          let date = new Date(formattedDate)
          document.cookie =
            'cur_date=' +
            date.getFullYear() +
            '-' +
            (date.getMonth() + 1 < 10
              ? '0' + (date.getMonth() + 1)
              : date.getMonth() + 1) +
            '-' +
            (date.getDate() + 1 < 10 ? '0' + date.getDate() : date.getDate())
        } else {
          //如果cookie里本来就有了，直接赋值
          this.timePicker = cookieDate
        }
        this.getPunctualRate()
        this.getShipment()
      },
      setEveryTimePick() {
        document.cookie = 'cur_date=' + this.timePicker
      },
      doSchedule() {
        this.$confirm('此操作重新排程, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          doSchedule(getCookie('cur_date')).then(() => {
            this.isRescheduling = true
            this.$message({
              type: 'success',
              message: '开始排程!',
            })
          })
        })
      },

      getPickerTime() {
        if (this.timePicker) {
          this.curDate = this.timePicker
        }
      },

      getShipment() {
        getShipment(getCookie('cur_date')).then((res) => {
          this.chl.xAxis[0].data = []
          this.chl.series[0].data = []
          let totalShipment = 0
          for (let i = 0; i < res.length; i++) {
            let item = res[i]
            this.chl.xAxis[0].data.push(item.date)
            this.chl.series[0].data.push(item.shipment)
            totalShipment += item.shipment
          }
          let myChart = echarts.init(document.getElementById('chart'))
          myChart.setOption(this.chl)
          myChart.resize()
          this.averageShipment = parseInt(totalShipment / 7)
        })
      },

      getPunctualRate() {
        getPunctualRate(this.timePicker).then((res) => {
          this.punctualRate = parseFloat(res)
          this.calculatePunctualColor()
        })
      },

      calculatePunctualColor() {
        if (parseFloat(this.punctualRate) > 80) {
          this.punctualColor = '#98FB98'
        } else if (parseFloat(this.punctualRate) > 60) {
          this.punctualColor = '#B0E0E6'
        } else if (parseFloat(this.punctualRate) > 40) {
          this.punctualColor = '#FFEC8B'
        } else if (parseFloat(this.punctualRate) > 20) {
          this.punctualColor = '#F4A460'
        } else {
          this.punctualColor = '#CD5555'
        }
      },
    },
  }
</script>
<style lang="scss" scoped>
  .index-container {
    padding: 0 !important;
    margin: 0 !important;
    background: #f5f7f8 !important;

    ::v-deep {
      .el-alert {
        padding: $base-padding;

        &--info.is-light {
          min-height: 82px;
          padding: $base-padding;
          margin-bottom: 15px;
          color: #909399;
          background-color: $base-color-white;
          border: 1px solid #ebeef5;
        }
      }

      .el-card__body {
        .echarts {
          width: 100%;
          height: 115px;
        }
      }
    }

    .card {
      ::v-deep {
        .el-card__body {
          .echarts {
            width: 100%;
            height: 305px;
          }
        }
      }
    }

    .bottom {
      padding-top: 20px;
      margin-top: 5px;
      color: #595959;
      text-align: left;
      border-top: 1px solid $base-border-color;
    }

    .table {
      width: 100%;
      color: #666;
      border-collapse: collapse;
      background-color: #fff;

      td {
        position: relative;
        min-height: 20px;
        padding: 9px 15px;
        font-size: 14px;
        line-height: 20px;
        border: 1px solid #e6e6e6;

        &:nth-child(odd) {
          width: 20%;
          text-align: right;
          background-color: #f7f7f7;
        }
      }
    }

    .icon-panel {
      height: 117px;
      text-align: center;
      cursor: pointer;

      svg {
        font-size: 40px;
      }

      p {
        margin-top: 10px;
      }
    }

    .bottom-btn {
      button {
        margin: 5px 10px 15px 0;
      }
    }
  }
</style>
